<template>
  <div class="todo-page">
    <a-tabs
      ref="tabs"
      v-model="activekey"
      @change="callback"
      :tabBarStyle="tabBarStyle"
    >
      <a-tab-pane
        :key="item.menuCode"
        :tab="item.menuName"
        v-for="item in tabsData"
      >
        <component
          :ref="item.menuCode"
          :is="item.menuCode"
          :isMenuCode="isMenuCode"
        ></component>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
//待办流程
import { queryPending } from "@/api/todo";
//获取登录信息
import { getLoginData, saveData } from "@/tools";
import { mapGetters } from "vuex";
//钢筋加工
import GJJG from "./components/rebarProcess";
//工序报验
import GXBY from "./components/process";
//梁生产任务单
import LSCRWD from "./components/produce";
//AI视频
import AQZP from "./components/safeSnap";
//实验管理系统
import SYGLXT from "./components/trialManagement";
export default {
  name: "todo",
  provide() {
    return {
      upLeave: this,
    };
  },
  components: {
    GJJG,
    GXBY,
    LSCRWD,
    AQZP,
    SYGLXT,
  },
  data() {
    return {
      tabsData: [],
      activekey: "",
      tabBarStyle: {
        backgroundColor: "#fff",
      },
      isMenuCode: null,
      todoListData: [],
      todoCount: 0,
    };
  },
  computed: {
    ...mapGetters(["todoData", "todoActiveKey", "todoWebsocket"]),
    condition() {
      let { todoData, todoActiveKey } = this;
      return { todoData, todoActiveKey };
    },
  },
  watch: {
    condition: {
      handler(val) {
        let { todoData, todoActiveKey } = val;
        if (todoData.length == 0) {
          saveData("TENANT", {});
          saveData("AUTO_OPEN_TENANT", 1);
          return;
        }
        this.tabsData = todoData || [];
        this.activekey = todoActiveKey;
        this.isMenuCode = this.activekey;
      },
      immediate: true,
      deep: true,
    },
    todoWebsocket: {
      handler(val) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs[this.todoActiveKey]?.[0]?.getTableData();
          }, 1000);
        });
      },
      deep: true,
    },
  },
  methods: {
    callback(e) {
      this.isMenuCode = e;
      saveData("TODO_ACTIVEKEY", e || null);
    },
    //查询待办列表
    getTodoData() {
      let { tenantCode, userId } = getLoginData();
      queryPending({
        userId,
        tenantCode,
      })
        .then((res) => {
          let { data } = res;
          let source = (data?.result?.retList || []).filter((v) => v.menuCode);
          this.todoListData = source ?? [];
          this.todoCount = data.result.totalCount;
          //数据存入vuex
          saveData("TODO_DATA", this.todoListData || []);
          saveData("TODO_TOTAL", this.todoCount || 0);
          this.$store.dispatch("setStoreState", {
            TODO_ACTIVEKEY: this.todoListData[0]?.menuCode || null,
          });
          let menuCode = "";
          let active = localStorage.getItem("TODO_ACTIVEKEY");
          if (active != null) {
            menuCode = this.todoListData.find(
              (item) => item.menuCode == active
            ).menuCode;
            if (menuCode) {
              saveData("TODO_ACTIVEKEY", active);
            }
          }
        })
        .catch((_) => {
          this.todoListData = [];
          this.todoCount = 0;
          saveData("TODO_DATA", []);
          saveData("TODO_TOTAL", 0);
          saveData("TODO_ACTIVEKEY", null);
          localStorage.removeItem("TODO_ACTIVEKEY");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.todo-page {
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  /deep/.ant-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    .ant-tabs-content {
      flex: 1;
      height: 100%;
    }
    .ant-tabs-bar {
      margin-bottom: 0;
    }
  }
}
</style>
